<template>
  <el-container id="layout-base" direction="vertical">
    <layout-header></layout-header>
    <el-container>
      <el-aside width="180px" >
          <layout-menu style="background: #ddd">
            <div class="project-menu" style="margin-top: 12px">
              <el-menu-item-group>
                <template slot="title"><strong style="color: #000">项目选择：</strong></template>
              </el-menu-item-group>
              <div class="project-select">
                <el-select size="small" :value="state.projectId" @change="onChangeProject">
                  <el-option
                    v-for="item in projectSelectOption"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  ></el-option>
                </el-select>
              </div>
              <layout-sub-menu :menu-list="menu" />
            </div>
          </layout-menu>

      </el-aside>
      <el-main>
        <div class="layout-main">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { defineComponent, getCurrentInstance } from '@vue/composition-api'
import LayoutHeader from './LayoutHeader'
import LayoutMenu from './LayoutMenu'
import LayoutSubMenu from './LayoutSubMenu'
import { useProjectCustomerSetting } from '@/hooks/project'

export default defineComponent({
  components: {
    LayoutHeader,
    LayoutMenu,
    LayoutSubMenu,
  },
  setup () {
    const vm = getCurrentInstance()
    const { projectSelectOption, setProjectId, state, menu } = useProjectCustomerSetting(false)

    const onChangeProject = (value) => {
      setProjectId(value)
      vm.$router.push('/customer')
    }
    return {
      projectSelectOption,
      onChangeProject,
      state,
      menu,
    }
  },
})
</script>

<style lang="scss">
#layout-base {
  height: 100vh;
  .layout-main {
    min-width: 1300px;
    margin: 0 auto;
  }
  .project-select {
    padding: 0 12px 12px;
    .el-input__inner {
      border-color: red;
      color: red;
    }
    .el-select .el-input .el-select__caret {
      color: red;
    }
  }

}
</style>
